﻿@{
    ViewBag.Title = "SimpleColumnChart";
    Layout = "~/Views/Shared/_Page.cshtml";
}

<h2>Simple Column Chart</h2>

<div id="container" style="width: 800px; height: 500px; margin: 0 auto"></div>

<script type="text/javascript">

    var chart;
    $(document).ready(function () {
        chart = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                defaultSeriesType: 'column'
            },
            title: {
                text: 'Production & Consumption Graph'
            },
            xAxis: {
                categories: [
                    2008,
                    2009,
                    2010,
                    2011,
                    2012,
                    2013,
                    2014,
                    2015,
                    2016,
                    2017,
                    2018
                ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'KT'
                }
            },
            legend: {
                layout: 'vertical',
                backgroundColor: '#FFFFFF',
                align: 'left',
                verticalAlign: 'top',
                x: 660,
                y: 5,
                floating: true,
                shadow: true
            },
            tooltip: {
                formatter: function () {
                    return '' +
                        this.x + ': ' + this.y + ' mm';
                }
            },
            plotOptions: {
                column: {
                    pointPadding: 0.2,
                    borderWidth: 0
                }
            },
            series: [
                {
                    name: 'Production',
                    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6]

                }, 
                {
                    name: 'Consumption',
                    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 106.6]

                }
            ]
        });


    });
				
</script>